<template>
    <div class="loginbody">
        <el-tabs type="border-card" class="tabs" >
        <div class="logindata">
            <div class="logintext">
                <h2>后台管理系统</h2>
            </div>
            <el-row>
            <el-col :span="18" :offset="2">
                <div class="formdata">
                    <el-form ref="form" label-width="30%" :model="form" :rules="rules">
                        <el-form-item label="用户名:" prop="username">
                            <el-input
                                    v-model="form.username"
                                    clearable
                                    placeholder="请输入用户名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密　码:" prop="password">
                            <el-input
                                    v-model="form.password"
                                    clearable
                                    placeholder="请输入密码"
                                    show-password
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            </el-row>
<!--            <el-row type="flex" class="row-bg" justify="center">-->
<!--                <el-col :span="10">-->
<!--                    <div class="grid-content bg-purple">-->
<!--                        <div class="tool">-->
<!--                            <div>-->
<!--                                <el-checkbox v-model="checked" @change="remenber"-->
<!--                                >记住密码</el-checkbox-->
<!--                                >-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                    <div class="grid-content bg-purple-light">-->
<!--                        <div>-->
<!--                            <span class="shou" @click="forgetpas">忘记密码？</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--            </el-row>-->
            <div class="butt">
                <el-button type="primary" @click="loginForm">登录</el-button
                >
            </div>
        </div>
        </el-tabs>
    </div>
</template>

<script>
    // import { login } from "@/api/login";
    // import { setToken } from "@/request/auth";

    export default {
        name: "login",
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                },
                checked: false,
                rules: {
                    username: [
                        { required: true, message: "请输入用户名", trigger: "blur" },
                    ],
                    password: [
                        { required: true, message: "请输入密码", trigger: "blur" },
                    ],
                },
            };
        },
        //记住密码
        mounted() {
            if(localStorage.getItem("news")){
                this.form=JSON.parse(localStorage.getItem("news"))
                this.checked=true
            }
        },
        methods: {
            //登录
            loginForm(){
                this.$refs["form"].validate((valid)=>{
                    if(valid){
                        this.$axios.post("/manage/login",this.form).then(response=>{
                            if(response.data.code==10001){
                                this.$message.error('账号或密码错误，请重新登录');
                            }
                            else {
                                console.log(response)
                                // 获得token
                                let token = response.data.token;
                                window.localStorage.setItem("TeacherToken",token);
                                window.localStorage.setItem("loginTeacher",JSON.stringify(response.data.loginTeacher));

                                this.$router.push("/manage");
                            }
                        })
                    }
                    else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //记住密码
            remenber(data){
                this.checked=data;
                if(this.checked){
                    localStorage.setItem("news",JSON.stringify(this.form))
                }else{
                    localStorage.removeItem("news")
                }
            },
            //忘记密码
            forgetpas() {
                this.$message({
                    type:"info",
                    message:"功能尚未开发额😥",
                    showClose:true
                })
            },
        },
    };
</script>

<style scoped>
    .loginbody {
        width: 100%;
        height: 100%;
        min-width: 1000px;
        background-image: url("~@/assets/login.png");
        background-size: 100% 100%;
        background-position: center center;
        overflow: auto;
        background-repeat: no-repeat;
        position: fixed;
        line-height: 100%;
        padding-top: 150px;

    }

    .logintext {
        margin-bottom: 6px;
        line-height: 20px;
        text-align: center;
        font-size: 30px;
        font-weight: bolder;
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

    .logindata {
        width: 400px;
        height: 300px;
        transform: translate(-50%);
        margin-left: 50%;
    }

    .tool {
        display: flex;
        justify-content: space-between;
        color: #606266;
    }

    .butt {
        margin-top: 10px;
        text-align: center;
    }

    .shou {
        cursor: pointer;
        color: #606266;
    }

    /deep/ .el-input__inner {
        background-color: rgba(0, 0, 0, 0) !important;
        border: 2px solid #606266;
    }
    .tabs{
        width: 500px;
        height: 320px;
        margin: 5% 0 0 55%;
        background: rgba(255,255,255,0.5);
        border-radius: 5px;
    }
</style>